<template>
  <!-- 订单详情 -->
  <view>
    <d-navBar title="订单详情" is-tran isPerch></d-navBar>
    <view class="main">
      <view class="co-bg"></view>

      <view class="address">
        <view class="df aic">
          <image
            class="ad-icon"
            :src="require('../static/address.png')"
            mode=""
          ></image>
          <view>
            <view class="ad-info" @longpress="$fn.copeStr(orederData.userName)"
              >{{ orederData.userName }}
              <text @longpress.stop="$fn.copeStr(orederData.phone)">{{
                orederData.phone
              }}</text>
            </view>
            <view
              class="ad-font"
              @longpress="$fn.copeStr(orederData.address)"
              >{{ orederData.address }}</view
            >
          </view>
        </view>
      </view>

      <view
        class="sc-shop"
        @click="
          $fn.jumpPage('/pages/shop/pages/goodsDetails?id=' + orederData.spuId)
        "
        v-for="(item, index) in orederData.orderItemList"
        :key="index"
      >
        <view class="sc-shop1">
          <view class="sc-img">
            <image :src="item.cover" mode=""></image>
            <!-- <view class="sc-end">距结束：23:56:39</view> -->
          </view>
          <view class="sc-right">
            <view class="sc-title otw">{{ item.title }}</view>
            <view class="sc-text">已选：{{ item.propertiesName }}</view>
            <view class="df aife jcsb mt10">
              <view class="sc-price"><text>￥</text>{{ item.goodsPrice }}</view>
              <view class="sc-num">x{{ item.payNum }}</view>
            </view>
          </view>
        </view>
        <view
          v-if="orederData.orderItemList.length > 1 && orederData.status != 0"
        >
          <view class="sc-box">
            <view class="sc-title1">优惠券</view>
            <view class="sc-text1"
              >-￥{{ item.discountAmount ? item.discountAmount : 0 }}</view
            >
          </view>
        </view>
        <view class="sc-box1">
          <view class="sc-title2"></view>
          <view
            class="sc-text2"
            style="margin-right: 10rpx"
            v-if="item.refundDetailsShow == 1"
            @click="gorefundDetails(item.refundId)"
            >查看退款详情
          </view>
          <!-- <view
            class="sc-text2"
            v-if="item.status == 1"
            @click="oneGoods(item.id)"
            >申请退款</view
          >
          <view
            class="sc-text2"
            v-if="item.status == 2"
            @click="oneGoods(item.id)"
            >申请退款</view
          > -->
          <view
            class="sc-text2"
            v-if="item.status == 3"
            @click="oneGoods(item.id)"
            >已完成</view
          >
          <view class="sc-text3" v-if="item.status == 4">退款中</view>
          <view class="sc-text3" v-if="item.status == 5">已退款</view>

          <!-- <view class="sc-text2" style="color: #fc3e3e;border: none;" v-if="item.status==2">已退款</view> -->
        </view>
      </view>

      <view class="expense">
        <view class="ex-box" @click="$fn.copeStr(orederData.number)">
          <view class="ex-title">订单编号</view>
          <view class="ex-text">{{ orederData.number }}</view>
        </view>
        <view class="ex-box">
          <view class="ex-title">下单时间</view>
          <view class="ex-text" v-if="orederData.status == 0"
            >{{ orederData.createTime ? orederData.createTime : "" }}
          </view>
          <view class="ex-text" v-else>{{
            orederData.payTime ? orederData.payTime : ""
          }}</view>
        </view>
        <view class="ex-box">
          <view class="ex-title">订单状态</view>
          <!-- <view class="ex-text">{{orederData.payNum}}</view> -->
          <!-- <view v-if="orederData.orderItemList.length>1"> -->
          <view v-if="orederData.status == 0" class="ex-text s1">待付款</view>
          <view v-else-if="orederData.status == 1" class="ex-text s4"
            >待发货</view
          >
          <view v-else-if="orederData.status == 2" class="ex-text s5"
            >待收货</view
          >
          <view v-else-if="orederData.status == 3" class="ex-text s3"
            >已完成</view
          >
          <view v-else-if="orederData.status == 4" class="ex-text s2"
            >售后</view
          >
          <view v-else class="or-status s2">已退款</view>
          <!-- </view> -->
        </view>
        <view class="ex-box">
          <view class="ex-title">商品总价</view>
          <view class="ex-text"
            >￥{{ orederData.totalPrice
            }}<text>共{{ orederData.orderItemList.length }}件商品</text>
          </view>
        </view>
        <view class="ex-box">
          <view class="ex-title">运费</view>
          <view class="ex-text">￥{{ orederData.freight }}</view>
        </view>
        <view class="ex-box">
          <view class="ex-title">优惠券</view>
          <view class="ex-text"
            >-￥{{
              orederData.discountAmount ? orederData.discountAmount : 0
            }}</view
          >
        </view>
        <view class="ex-box">
          <view class="ex-title">积分抵扣</view>
          <view class="ex-text"
            >-￥{{
              orederData.payRattan ? orederData.payRattan.toFixed(2) : "0"
            }}</view
          >
        </view>
        <view class="ex-box" style="border: none">
          <view class="ex-title fw">合计</view>
          <view class="ex-text">￥{{ orederData.payAmount }}</view>
        </view>
        <view class="line"> </view>
        <view class="ex-remark">
          <view class="ex-title fw">留言备注</view>
          <view class="ex-area">{{
            orederData.remarks ? orederData.remarks : "暂无备注"
          }}</view>
        </view>
      </view>

      <view class="ba-box"></view>

      <!-- 多个商品 -->
      <view v-if="orederData.orderItemList.length > 1" class="base">
        <view
          class="btn-box"
          style="margin-left: 220rpx"
          v-if="orederData.status == 1 && orederData.allOrderItemStatus == true"
        >
          <view class="ba-btn cancel" @click="confirmCall">申请退款</view>
          <!-- <view class="ba-btn" @click="receiptGoods(v)">确认收货</view> -->
        </view>
        <view
          class="btn-box"
          v-if="orederData.status == 2 && orederData.allOrderItemStatus == true"
        >
          <view class="ba-btn cancel" @click="confirmCall">申请退款</view>
          <view class="ba-btn cancel" @click="viewLogistics">查看物流</view>
          <view class="ba-btn" @click="receiptGoods(v)">确认收货</view>
        </view>
        <view
          class="btn-box"
          style="margin-left: 220rpx"
          v-if="orederData.status == 3"
        >
          <view class="ba-btn cancel" @click="confirmCall">申请退款</view>
          <view class="ba-btn cancel" @click="viewLogistics">查看物流</view>
        </view>
        <view
          class="btn-box"
          v-if="orederData.status == 4 && orederData.allOrderItemStatus == true"
        >
          <view
            v-if="msg === '暂无物流信息'"
            style="display: flex; margin-left: 220rpx"
          >
            <view class="ba-btn cancel" @click="confirmCall">申请退款</view>
            <view class="ba-btn" @click="receiptGoods(v)">确认收货</view>
          </view>
          <view v-else style="display: flex">
            <view class="ba-btn cancel" @click="confirmCall">申请退款</view>
            <view class="ba-btn cancel" @click="viewLogistics">查看物流</view>
            <view class="ba-btn" @click="receiptGoods(v)">确认收货</view>
          </view>
        </view>
        <view
          class="btn-box"
          style="margin-left: 220rpx"
          v-if="
            orederData.status == 4 && orederData.allOrderItemStatus == false
          "
        >
          <view
            class="ba-btn cancel"
            @click="gorefundDetails(orederData.orderItemList[0].refundId)"
            >查看退款详情
          </view>
          <view class="ba-btn cancel" @click="viewLogistics">查看物流</view>
          <!-- <view class="ba-btn" @click="receiptGoods(v)">确认收货</view> -->
        </view>
        <view class="btn-box"> </view>
      </view>

      <!-- 单个商品 -->
      <view v-if="orederData.orderItemList.length == 1" class="base" style="display: flex;justify-content: flex-end;">
        <!-- 待发货 -->
        <view
          class="btn-box"
          v-if="orederData.orderItemList[0].status == 1"
        >
          <view
            class="ba-btn cancel"
			style="margin-right:0;"
            @click="confirmCall"
            >申请退款</view
          >
          <!-- <view class="ba-btn cancel" @click="viewLogistics">查看物流</view> -->
          <!-- <view class="ba-btn" @click="receiptGoods(v)">确认收货</view> -->
        </view>
        <!-- 待收货 -->
        <view class="btn-box" v-if="orederData.orderItemList[0].status == 2">
          <view class="ba-btn cancel" @click="confirmCall">申请退款</view>
          <view class="ba-btn cancel" @click="viewLogistics">查看物流</view>
          <view class="ba-btn" @click="receiptGoods(v)">确认收货</view>
        </view>
        <!-- 已完成 -->
        <view class="btn-box" v-if="orederData.orderItemList[0].status == 3">
        </view>
        <!--  -->
        <view class="btn-box" v-if="orederData.orderItemList[0].status == 4">
          <view
            class="ba-btn cancel"
            @click="gorefundDetails(orederData.orderItemList[0].refundId)"
            >查看退款详情
          </view>
          <view class="ba-btn cancel" @click="viewLogistics">查看物流</view>
          <view class="ba-btn" @click="receiptGoods(v)">确认收货</view>
        </view>
        <view class="btn-box" v-if="orederData.orderItemList[0].status == 5">
          <view v-if="msg === '暂无物流信息'">
            <!-- <view class="refund" @click="gorefundDetails(orederData.orderItemList[0].refundId)">查看退款详情</view> -->
          </view>
          <view v-else style="margin-left: 440rpx">
            <!-- <view class="ba-btn cancel" @click="gorefundDetails(orederData.orderItemList[0].refundId)">查看退款详情</view> -->
            <view class="ba-btn cancel" @click="viewLogistics">查看物流</view>
          </view>
          <!-- <view class="ba-btn" @click="receiptGoods(v)">确认收货</view> -->
        </view>
      </view>
      <!-- 待支付 -->
      <view class="base" v-if="orederData.status == 0">
        <view class="btn-box3">
          <view class="ba-time">
            <text style="padding-right: 8rpx; box-sizing: border-box"
              >剩余支付时间</text
            ><u-count-down
              color="#FF3B20"
              separator-color="#FF3B20"
              :time="$fn.addMinutesTime(orederData.createTime, 15) * 1000"
            ></u-count-down>
          </view>
          <view class="box3-view" @click="goPay(orederData.id)">
            立即支付
          </view>
        </view>
      </view>

      <!-- <c-imgTipsPopOne :show="isConfirmShow" :img="popImg" text='退款自动退回微信账户' title='退款成功'
				@close="confirmCall"></c-imgTipsPopOne> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isConfirmShow: false,
      isPopShow: false,
      popImg: require("../../../static/tabbar/gou.png"),
      goodId: "",
      orederData: {
        orderItemList: [],
      },
      user2: {},
      option: {},
      msg: "",
      allStatusId: [], //全部退款成功
    };
  },
  onLoad(option) {
    this.goodId = option.id;
    this.option = option;
    this.user2 = uni.getStorageSync("user2");
    this.getList();
  },
  onShow() {
    this.getfrontendOrderFn();
  },
  methods: {
    // 是否有物流信息
    getList() {
      this.$api
        .getLogisticsInfo(
          {
            id: this.goodId,
          },
          {
            custom: {
              toast: false,
              catch: true,
            },
          }
        )
        .then((res) => {
          // console.log(res, "物流详情");
          if (res.data) {
            this.logData = res.data;
            let arr = JSON.parse(res.data.logisticsInfo);
            if (arr.data) {
              this.list = arr.data;
              this.current = res.data.length;
            }
          }
        })
        .catch((err) => {
          this.msg = err.msg;
          console.log(err, "err13");
        });
    },
    // 查看退款详情
    gorefundDetails(refundId) {
      if (refundId == 1) {
        // 单个商品
        uni.navigateTo({
          url: `/pages/order/pages/refundDetails?id=${this.orederData.orderItemList[0].refundId}&&type=1`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/order/pages/refundDetails?id=${refundId}&&type=2`,
        });
      }
    },
    // 获取订单详情
    getfrontendOrderFn() {
      this.$api
        .frontendOrderDetail({
          id: this.goodId,
        })
        .then((res) => {
          this.orederData = res.data;
          console.log("订单详情data", res.data);
        });

      // this.orderData.orderSum = this.orderData.flashSale ? this.orderData.flashSalePrice :
      // 	this.orderData.price * this.orderData.quantity
      // this.orderData.totalSum = this.orderData.orderSum + this.freight - this.payIntegral
    },
    // 确定按钮
    confirmCall() {
      let that = this;
      uni.showModal({
        title: "温馨提示",
        content: "确定退款并取消当前订单吗?",
        confirmColor: "#2AD03D", // 删除字体的颜色
        cancelColor: "#606166", // 取消字体的颜色
        success: function (res) {
          if (res.confirm) {
            // console.log('用户点击确定');
            uni.navigateTo({
              url: `/pages/order/pages/applyGoods?goodId=${that.orederData.id}&&type=2`,
            });
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
      // uni.navigateTo({
      // 	url: '/pages/order/pages/applyGoods?id=' + this.orederData.id
      // })
      // const {
      // 	data: {
      // 		data
      // 	}
      // } = await this.$u.api.initiateRefund()
      // console.log('申请退款了');
      // this.tips = true
      // this.getfrontendOrderFn()
    },
    // 单个商品申请退款
    oneGoods(id) {
      let that = this;
      uni.showModal({
        title: "温馨提示",
        content: "确定退款并取消当前订单吗?",
        confirmColor: "#2AD03D", // 删除字体的颜色
        cancelColor: "#606166", // 取消字体的颜色
        success: function (res) {
          if (res.confirm) {
            // console.log('用户点击确定');
            uni.navigateTo({
              url: `/pages/order/pages/applyGoods?goodId=${id}&&type=1`,
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 确认收货
    receiptGoods(val) {
      uni.showModal({
        title: "温馨提示",
        content: "是否确定收货",
        confirmColor: "#2AD03D", // 删除字体的颜色
        cancelColor: "#606166", // 取消字体的颜色
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            this.$api
              .confirmTakeOver({
                id: this.goodId,
              })
              .then((res) => {
                console.log(res.data, "成功收货");
                if (res.code == 200) {
                  uni.showToast({
                    title: "成功收货",
                  });
                  this.getfrontendOrderFn();
                }
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 关闭弹窗
    closePop() {
      this.isPopShow = false;
    },
    // 查看物流
    viewLogistics() {
      uni.navigateTo({
        url: "/pages/order/pages/logisticsInformation?id=" + this.goodId,
      });
    },
    // 立即支付
    async goPay(id) {
      const { code, data, msg } = await this.$api.continuePaymentY({
        id: id,
      });
      console.log("支付成功", data);
      if (code == 200 && data.paySignVO) {
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: data.paySignVO.timeStamp,
          nonceStr: data.paySignVO.nonceStr,
          package: data.paySignVO.package,
          signType: data.paySignVO.signType,
          paySign: data.paySignVO.paySign,
          success: (res) => {
            console.log("res111", res);
            // uni.showToast({
            // 	title: '支付成功'
            // })
            // this.getfrontendOrderFn()
          },
          fail: (err) => {
            console.log("err", err);
            uni.showToast({
              icon: "fail",
              title: "取消支付",
              duration: 1000,
            });
          },
        });
      } else if (code == 200) {
        console.log("res", res);
        uni.showToast({
          title: "支付成功",
          icon: "success",
          duration: 1000,
        });
        this.getfrontendOrderFn();
      } else {
        uni.showToast({
          icon: "error",
          title: "支付失败",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.line-one {
  width: 100%;
  height: 20rpx;
}

.refund {
  width: 686rpx;
  height: 96rpx;
  border: 1rpx solid #999999;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-box1 {
  width: 100%;
  height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;

  .sc-text2 {
    // width: 144rpx;
    height: 44rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1rpx solid #999999;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #666666;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .sc-text3 {
    width: 144rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: orange;
  }
}

.sc-box {
  width: 100%;
  height: 84rpx;
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #e6e6e6;
  border-top: 1rpx solid #e6e6e6;

  .sc-title1 {
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .sc-text1 {
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}

.line {
  width: 100%;
  height: 8rpx;
  background: #f7f7f7;
}

.co-bg {
  width: 750rpx;
  height: 320rpx;
  background: linear-gradient(180deg, #e6f6e9 0%, #ffffff 100%);
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
  padding: 20rpx 32rpx 24rpx 20rpx;
  border-bottom: 8rpx solid #f6f6f6;

  .ad-icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 16rpx;
  }

  .ad-go {
    width: 20rpx;
    height: 20rpx;
  }

  .ad-please {
    font-size: 28rpx;
    color: #666666;
  }

  .ad-info {
    font-size: 32rpx;
    font-weight: bold;
    color: #1a1a1a;
  }

  .ad-font {
    font-size: 24rpx;
    font-weight: 400;
    color: #666666;
    margin-top: 16rpx;
  }
}

.sc-shop {
  border-radius: 12rpx;
  position: relative;
  background: #fff;
  padding: 18rpx 32rpx;
  border-bottom: 8rpx solid #f6f6f6;

  .sc-shop1 {
    display: flex;

    .sc-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
      flex: none;

      .sc-end {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40rpx;
        background: linear-gradient(90deg, #ff4b57 44%, #ff8326 100%);
        border-radius: 12rpx;
        font-size: 20rpx;
        color: #ffffff;
        text-align: center;
        line-height: 38rpx;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }

    .sc-right {
      padding: 0rpx 0rpx 0rpx 28rpx;
      width: 500rpx;

      .sc-title {
        font-size: 32rpx;
        color: #343840;
      }

      .sc-num {
        font-size: 28rpx;
        font-weight: bold;
        color: #1a1a1a;
      }

      .sc-price {
        font-size: 48rpx;
        font-weight: 800;
        color: #ee3b31;

        text {
          font-size: 24rpx;
        }
      }

      .sc-text {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        margin: 14rpx 0;
      }
    }
  }
}

.expense {
  .ex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #e6e6e6;

    &:nth-last-child(1) {
      border-bottom: 8rpx solid #e6e6e6;
    }

    .ex-text {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;

      text {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-left: 40rpx;
      }

      &.s1 {
        color: #fd8417;
      }

      &.s2 {
        color: #999999;
      }

      &.s3 {
        color: #1a1a1a;
      }

      &.s4 {
        color: #fc3e3e;
      }

      &.s5 {
        color: #4eb212;
      }
    }
  }

  .ex-title {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #999999;

    &.fw {
      font-weight: bold;
    }
  }

  .ex-remark {
    padding: 32rpx;

    .ex-area {
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      margin-top: 12rpx;
    }
  }
}

.ba-box {
  height: calc(24rpx + 24rpx + 80rpx + env(safe-area-inset-bottom));
}

.base {
  position: fixed;
  // bottom: var(--iphonex-fix-bottom);
  // --iphonex-fix-bottom: env(safe-area-inset-bottom);
  left: 0;
  bottom: 0;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #e6e6e6;
  width: 750rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;

  .ba-total {
    font-size: 36rpx;
    font-weight: bold;
    color: #343840;
  }

  .btn-box {
    display: flex;
    align-items: center;

    .ba-btn {
      width: 216rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 78rpx;
      text-align: center;

      &.cancel {
        width: 216rpx;
        height: 76rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        text-align: center;
        border: 1rpx solid #999999;
        font-size: 32rpx;
        color: #666666;
        background: #fff;
        margin-right: 20rpx;
      }
    }
  }

  .btn-box2 {
    .ba-btn {
      width: 686rpx;
      height: 96rpx;
      background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
      border-radius: 16rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      line-height: 94rpx;
    }
  }

  .btn-box3 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ba-time {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #fc5d5d;

      ::v-deep .u-count-down__text.data-v-463368ae {
        color: #fc5d5d;
      }
    }

    .box3-view {
      // margin-left: 200rpx;
      width: 216rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
